import React from 'react';
import {numberHandle} from '~/utils/number';

import CommonEchart from '../../common/CommonEchart';
import withPannel from './withPannel';

const tooltipCallback = params => {
    let html = '';
    let name = '';
    if (Array.isArray(params)) {
        html = params.map(entry => {
            const {marker, seriesName, value, name: entryName} = entry;
            name = entryName;
            return `${marker}${seriesName} ${numberHandle(value, 2)}`;
        });
    }

    return `${name}<br /> ${html.join('<br >')}`;
};

const labelFormatter = (params = {}) => {
    const {
        data: {value = ''}
    } = params;
    return numberHandle(value, 2);
};

const extendOptions = {
    tooltip: {
        trigger: 'axis',
        formatter: tooltipCallback
    },
    legend: {
        left: 'left'
    },
    xAxis: {
        common: {
            axisLabel: {
                // rotate: 30
            }
        }
    },
    yAxis: {
        common: {
            splitLine: {show: false},
            name: '',
            axisLabel: {
                formatter: value => numberHandle(value, 0)
            }
        }
    },
    grid: {
        left: 40,
        right: '3%',
        bottom: 20,
        containLabel: true
    },
    series: {
        common: {
            barMaxWidth: 30,
            barGap: '100%',
            barCategoryGap: '50%',
            // label: {show: true, position: 'top', formatter: labelFormatter},
        }
    }
};

const StudentChart = props => {
    const {dataSource, unitId} = props;
    return <CommonEchart {...props} id={unitId} extendEchartsOptions={extendOptions} dataSource={dataSource} />;
};

export default withPannel(StudentChart);
